<template>
  <!-- 组件中只有一个弹窗 -->
  <el-dialog
      v-model="classifyEditWinDialogVisible"
      title="修改分类"
      width="50%"
      @close="handleClose"
  >
    <template #default>
      <el-form style="margin-top: 10px" :model="editClassify" label-width="auto">
        <el-row v-if="superiorClassify">
          <el-col>
            <el-form-item label="父分类" style="font-weight: bold">
              <el-select v-model="superiorClassify.classifyName"  disabled>
                <el-option label="superiorClassify.classifyName" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item  style="float: left;font-weight: bold" label="分类名称">
          <el-input style="width: 220px" v-model="editClassify.classifyName"/>
        </el-form-item>


        <el-row style="margin-left: 330px;font-weight: bold">
          <el-col>
            <el-form-item label="显示排序">
              <el-input-number style="width: 220px" min="1" v-model="editClassify.classifyOrder"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item style="float: left;font-weight: bold" label="物料/产品">
          <el-radio-group v-model="editClassify.classifyType">
            <el-radio :label=1>物料</el-radio>
            <el-radio :label=2>产品</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item style="margin-left: 330px;font-weight: bold" label="启用状态">
          <el-radio-group v-model="editClassify.classifyStatus">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelEditClassify">取消</el-button>
        <el-button type="primary" @click="editClassifySubmit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref , watch} from 'vue'
import classifyRequest from "@/api/classify.js";
import {ElMessage} from "element-plus";

// 申明这个组件的事件  editComplete
const emits = defineEmits(['editComplete','cancelClassifyEdit'])
// 弹窗标记
let classifyEditWinDialogVisible = ref(false);
// 当前登录用户的编号
let curUserId = ref();
// 申明的属性
// parentClassify：上级的分类
// classifyId: 当前要编辑的分类的编号
let props = defineProps(["superiorClassify","classifyId"]);
// 编辑的项目对象
let editClassify = ref({})

/**
 * 取消编辑按钮事件
 */
function cancelEditClassify(){
  // 将当前的编辑对象置空
  editClassify = ref({});
  // 关闭窗体
  classifyEditWinDialogVisible.value = false;
  // 触发暴漏出去的取消编辑的事件
  emits("cancelClassifyEdit")
}

/**
 * 关闭窗体前的回调函数
 */
function handleClose(){
  // 触发暴漏出去的取消编辑的事件
  emits("cancelClassifyEdit")
}

/**
 * 编辑提交
 */
function editClassifySubmit(){
  classifyRequest.updateClassifyById(editClassify.value,res=>{
    if(res.code == 200){
      ElMessage({
        type:"success",
        message:"编辑分类成功"
      });
      // 关闭弹窗
      cancelEditClassify();
      // 触发编辑完成的事件
      emits('editComplete',res.data);
    } else if (res.code === 300) {
      ElMessage({
        type:"warning",
        message:"分类名称重复"
      });
    } else if (res.data == '分类名称不能为空') {
      ElMessage({
        type:"warning",
        message:"分类名称不能为空"
      });
    } else if (res.data == '排序不能为空') {
      ElMessage({
        type:"warning",
        message:"排序不能为空"
      });
    } else if (res.data == '分类是物料还是产品选其一') {
      ElMessage({
        type:"warning",
        message:"分类是物料还是产品选其一"
      });
    } else {
      ElMessage({
        type:"warning",
        message:"修改分类失败"
      });
    }
  })
}

/**
 * 通过classifyId加载任务信息
 * @param classifyId
 */
function loadClassifyById(classifyId){
  classifyRequest.selectById(classifyId,res=>{
    if(res.data){
      editClassify.value = res.data;
      // 弹窗
      classifyEditWinDialogVisible.value = true;
    }
  });
}

/**
 * 侦听器 侦听 props.classifyId
 * // 每次属性props.classifyId发生变化这里都会执行
 */
watch(()=>props.classifyId,()=>{
  // 判断classifyId是否是-1，如果是-1，说明是取消操作，不需要做任何操作。
  if(props.classifyId != -1){
    // 如果不是-1 就加载要编辑的数据
    loadClassifyById(props.classifyId);
  }
});

onMounted(()=>{
  // 获取用户编号
  curUserId = localStorage.getItem("userId");
  console.log(curUserId);
})
</script>
<style scoped>
</style>